<!-- src/views/TestIntegration.vue -->
<template>
  <div class="test-integration">
    <h1>判题系统整合测试</h1>
    
    <div class="test-controls">
      <div class="control-group">
        <label>题目ID:</label>
        <input v-model="testProblemId" type="text" placeholder="输入题目ID">
        <button @click="loadTestProblem">加载题目</button>
      </div>
      
      <div class="control-group">
        <label>判题模式:</label>
        <select v-model="judgeMode">
          <option value="strict">严格模式</option>
          <option value="loose">宽松模式</option>
        </select>
      </div>
      
      <div class="control-group">
        <label>启用图片对比:</label>
        <input v-model="enableImageComparison" type="checkbox">
      </div>
      
      <div class="control-group">
        <label>图片相似度阈值:</label>
        <input v-model="imageSimilarityThreshold" type="number" min="0" max="1" step="0.1">
      </div>
    </div>

    <div v-if="error" class="error-message">
      {{ error }}
    </div>

    <div v-if="successMessage" class="success-message">
      {{ successMessage }}
    </div>

    <!-- 使用整合后的GocJudge组件 -->
    <GocJudge 
      v-if="testProblemId"
      :problemId="testProblemId"
      :judgeMode="judgeMode"
      :enableImageComparison="enableImageComparison"
      :imageSimilarityThreshold="imageSimilarityThreshold"
      @judge-complete="onJudgeComplete"
      @problem-loaded="onProblemLoaded"
      @error="onError"
    />

    <!-- 测试结果展示 -->
    <div v-if="testResults.length > 0" class="test-results">
      <h3>测试历史</h3>
      <div class="result-item" v-for="(result, index) in testResults" :key="index">
        <div class="result-header">
          <span>测试 {{ index + 1 }}</span>
          <span :class="result.status">{{ result.statusText }}</span>
          <span>{{ new Date(result.timestamp).toLocaleTimeString() }}</span>
        </div>
        <div class="result-details">
          <p>得分: {{ result.score }}/{{ result.totalScore }}</p>
          <p>通过用例: {{ result.passedCases }}/{{ result.totalCases }}</p>
          <p>执行时间: {{ result.executionTime }}ms</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import GocJudge from '../components/GocJudge.vue'
import logger from '../utils/logger.js'

export default {
  name: 'TestIntegration',
  components: {
    GocJudge
  },
  data() {
    return {
      testProblemId: '23885', // 默认题目ID
      judgeMode: 'strict',
      enableImageComparison: true,
      imageSimilarityThreshold: 0.8,
      error: '',
      successMessage: '',
      testResults: []
    }
  },
  methods: {
    loadTestProblem() {
      this.error = ''
      this.successMessage = ''
      // 触发重新加载
      this.$forceUpdate()
    },
    onJudgeComplete(result) {
      logger.log('测试判题结果:', result)
      
      // 添加到测试历史
      this.testResults.unshift({
        ...result,
        timestamp: Date.now()
      })
      
      // 限制历史记录数量
      if (this.testResults.length > 10) {
        this.testResults = this.testResults.slice(0, 10)
      }
      
      // 显示成功消息
      if (result.status === 'accepted') {
        this.successMessage = '恭喜！所有测试用例都通过了！'
      } else {
        this.successMessage = `判题完成，通过 ${result.passedCases}/${result.totalCases} 个测试用例`
      }
      
      // 3秒后清除消息
      setTimeout(() => {
        this.successMessage = ''
      }, 3000)
    },
    onProblemLoaded(problem) {
      logger.log('测试题目加载:', problem)
      this.successMessage = `题目 "${problem.title}" 加载成功`
      
      // 3秒后清除消息
      setTimeout(() => {
        this.successMessage = ''
      }, 3000)
    },
    onError(error) {
      logger.error('测试错误:', error)
      this.error = error.message || '发生未知错误'
      
      // 5秒后清除错误消息
      setTimeout(() => {
        this.error = ''
      }, 5000)
    }
  }
}
</script>

<style scoped>
.test-integration {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.test-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 30px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.control-group label {
  font-weight: bold;
  color: #2c3e50;
}

.control-group input,
.control-group select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.control-group button {
  padding: 8px 16px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.control-group button:hover {
  background: #2980b9;
}

.error-message {
  padding: 15px;
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
  margin-bottom: 20px;
}

.success-message {
  padding: 15px;
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
  border-radius: 4px;
  margin-bottom: 20px;
}

.test-results {
  margin-top: 30px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.test-results h3 {
  margin-top: 0;
  color: #2c3e50;
}

.result-item {
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 10px;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-weight: bold;
}

.result-header .accepted {
  color: #28a745;
}

.result-header .wrong_answer {
  color: #dc3545;
}

.result-details {
  display: flex;
  gap: 20px;
  font-size: 14px;
  color: #666;
}

.result-details p {
  margin: 0;
}
</style>

